<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>蔬记 - 蔬菜详情</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#10b981',
                        secondary: '#10b981',
                        light: '#f8fafc',
                        dark: '#0f172a',
                        muted: '#64748b',
                        border: '#e2e8f0',
                        success: '#19995a',
                        successLight: '#ecfdf5',
                    },
                    fontFamily: {
                        sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'sans-serif'],
                    },
                    borderRadius: {
                        lg: '16px',
                        xl: '20px',
                    },
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .safe-top {
                padding-top: env(safe-area-inset-top, 0px);
            }
            .safe-bottom {
                padding-bottom: env(safe-area-inset-bottom, 0px);
            }
            .backdrop-blur {
                backdrop-filter: blur(8px);
                -webkit-backdrop-filter: blur(8px);
            }
            .content-auto {
                content-visibility: auto;
            }
            .action-card-shadow {
                box-shadow: 0 4px 20px rgba(16, 185, 129, 0.1);
            }
            .hero-gradient {
                background: linear-gradient(180deg, #f0fff4, #ffffff);
            }
        }
    </style>
    <script>
        function getQueryParam(key) {
            const params = new URLSearchParams(window.location.search);
            return params.get(key);
        }
        function getGrowthDays(plant) {
            const plantedDate = new Date(plant.plantedDate);
            const now = new Date();
            return Math.floor((now - plantedDate) / (1000 * 60 * 60 * 24));
        }
        function getGrowthStatus(plant) {
            const d = getGrowthDays(plant);
            if (d < 7) return '发芽期';
            if (d < 14) return '幼苗期';
            if (d < 21) return '成长期';
            if (d < 30) return '成熟期';
            return '可收获';
        }
        function getExpectedHarvestDate(plant) {
            const plantedDate = new Date(plant.plantedDate);
            const harvestDate = new Date(plantedDate.getTime() + 30 * 24 * 60 * 60 * 1000);
            return formatDate(harvestDate.toISOString());
        }
        function getDaysToHarvest(plant) {
            if (plant.harvested) return 0;
            const plantedDate = new Date(plant.plantedDate);
            const expectedHarvestDate = new Date(plantedDate.getTime() + 30 * 24 * 60 * 60 * 1000);
            const now = new Date();
            const daysLeft = Math.ceil((expectedHarvestDate - now) / (1000 * 60 * 60 * 24));
            return Math.max(0, daysLeft);
        }
        function getGrowthProgress(plant) {
            const d = getGrowthDays(plant);
            const max = 30;
            return Math.min(Math.floor((d / max) * 100), 100);
        }
        function formatDate(dateString) {
            const date = new Date(dateString);
            return date.toLocaleDateString('zh-CN');
        }
        function formatDateTime(iso) {
            const d = new Date(iso);
            return d.toLocaleString('zh-CN', { hour12: false });
        }
        function getActionMeta(type) {
            switch(type) {
                case 'water': return { icon: 'fa-tint', label: '浇水' };
                case 'fertilize': return { icon: 'fa-flask', label: '施肥' };
                case 'prune': return { icon: 'fa-scissors', label: '修剪' };
                case 'loosen': return { icon: 'fa-shovel', label: '松土' };
                case 'pest': return { icon: 'fa-bug', label: '病虫防治' };
                default: return { icon: 'fa-pencil', label: '操作' };
            }
        }
        function buildStageTips(status) {
            const s = (status || '').trim();
            const map = {
                '发芽期': [
                    { emoji: 'fa-tint', text: '基质保持微湿，喷雾浇水，避免冲散种子。' },
                    { emoji: 'fa-thermometer-half', text: '18-24℃，夜间≥15℃，必要时加盖育苗罩保温。' },
                    { emoji: 'fa-sun-o', text: '散射光6-8小时，避免直射强光。' },
                    { emoji: 'fa-shield', text: '托盘工具保持清洁，降低霉菌与立枯风险。' }
                ],
                '幼苗期': [
                    { emoji: 'fa-leaf', text: '适当间苗，保证每株生长空间。' },
                    { emoji: 'fa-flask', text: '薄肥勤施，稀释氮肥促进叶片生长。' }
                ],
                '成长期': [
                    { emoji: 'fa-tint', text: '视天气与土壤湿度，2-3天浇一次透水。' },
                    { emoji: 'fa-scissors', text: '修剪枯叶与侧枝，保证通风采光。' }
                ],
                '成熟期': [
                    { emoji: 'fa-bullseye', text: '控制氮肥，补钾磷，提升品质与风味。' },
                    { emoji: 'fa-bug', text: '关注病虫害，重点检查叶面与茎部。' }
                ],
                '可收获': [
                    { emoji: 'fa-cutlery', text: '清晨或傍晚收获，口感更佳。' },
                    { emoji: 'fa-box', text: '分批采摘，促进持续产出。' }
                ]
            };
            return map[s] || [ { emoji: 'fa-info-circle', text: '暂无阶段提醒。' } ];
        }
        function renderStageTips(status) {
            const list = document.getElementById('stageTips');
            if (!list) return;
            const tips = buildStageTips(status);
            list.innerHTML = tips.map(t => `
                <li class="flex gap-3 items-start p-3 bg-light rounded-lg border border-border transition-all duration-200 hover:shadow-md">
                    <span class="text-primary w-8 h-8 flex items-center justify-center">
                        <i class="fa ${t.emoji}"></i>
                    </span>
                    <span class="text-dark text-sm leading-relaxed">${t.text}</span>
                </li>
            `).join('');
        }
        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-dark/80 text-white px-4 py-2 rounded-full text-sm opacity-0 transition-opacity duration-300 z-50 backdrop-blur';
            toast.textContent = message;
            document.body.appendChild(toast);
            setTimeout(() => { toast.classList.add('opacity-100'); }, 100);
            setTimeout(() => {
                toast.classList.remove('opacity-100');
                setTimeout(() => { if (document.body.contains(toast)) document.body.removeChild(toast); }, 300);
            }, 2000);
        }
        function renderRecentActions(plant) {
            const list = document.getElementById('recentActionsList');
            if (!list) return;
            const actions = (plant.actions || []).slice().sort((a, b) => new Date(b.time) - new Date(a.time)).slice(0, 5);
            if (actions.length === 0) {
                list.innerHTML = `
                    <div class="p-6 flex flex-col items-center justify-center text-muted">
                        <div class="w-12 h-12 rounded-full bg-light flex items-center justify-center mb-2">
                            <i class="fa fa-info-circle text-primary"></i>
                        </div>
                        <span class="text-sm">暂无最近操作</span>
                    </div>
                `;
                return;
            }
            list.innerHTML = actions.map(a => {
                const meta = getActionMeta(a.type);
                return `
                    <div class="p-3 border-b border-border last:border-0 transition-colors hover:bg-light">
                        <div class="flex items-center gap-3">
                            <div class="w-8 h-8 rounded-lg bg-light flex items-center justify-center text-primary">
                                <i class="fa ${meta.icon}"></i>
                            </div>
                            <div class="flex-1 min-w-0">
                                <div class="font-medium text-dark truncate">${meta.label}</div>
                                <div class="text-xs text-muted mt-0.5">${formatDateTime(a.time)}</div>
                            </div>
                            <div class="animate-pulse opacity-60 transition-opacity hover:opacity-100">
                                <i class="fa fa-chevron-right text-muted text-xs"></i>
                            </div>
                        </div>
                    </div>
                `;
            }).join('');
        }
        function performPlantAction(actionType) {
            const plantId = window.currentPlantId;
            if (!plantId) return;
            const plantedPlants = JSON.parse(localStorage.getItem('plantedPlants')) || [];
            const idx = plantedPlants.findIndex(p => p.id === plantId);
            if (idx === -1) return;
            const now = new Date().toISOString();
            if (!Array.isArray(plantedPlants[idx].actions)) {
                plantedPlants[idx].actions = [];
            }
            plantedPlants[idx].actions.push({ type: actionType, time: now });
            localStorage.setItem('plantedPlants', JSON.stringify(plantedPlants));
            renderRecentActions(plantedPlants[idx]);
            const meta = getActionMeta(actionType);
            showToast(`${meta.label} 已记录`);
        }
        function harvestPlant() {
            const plantId = window.currentPlantId;
            if (!plantId) return;
            if (confirm('确定要收获这株植物吗？')) {
                const plantedPlants = JSON.parse(localStorage.getItem('plantedPlants')) || [];
                const idx = plantedPlants.findIndex(p => p.id === plantId);
                if (idx !== -1) {
                    plantedPlants[idx].harvested = true;
                    plantedPlants[idx].harvestedDate = new Date().toISOString();
                    localStorage.setItem('plantedPlants', JSON.stringify(plantedPlants));
                    showToast('收获成功！');
                    renderPage();
                }
            }
        }
        function removePlant() {
            const plantId = window.currentPlantId;
            if (!plantId) return;
            if (confirm('确定要铲除这株植物吗？此操作不可恢复。')) {
                const plantedPlants = JSON.parse(localStorage.getItem('plantedPlants')) || [];
                const idx = plantedPlants.findIndex(p => p.id === plantId);
                if (idx !== -1) {
                    plantedPlants.splice(idx, 1);
                    localStorage.setItem('plantedPlants', JSON.stringify(plantedPlants));
                    showToast('已铲除');
                    setTimeout(() => { window.location.href = 'growing-plants.html'; }, 600);
                }
            }
        }
        function handleHarvestOrRemove() {
            const status = document.getElementById('statusBadge')?.textContent || '';
            if (status === '可收获') {
                harvestPlant();
            } else if (status === '成熟期') {
                removePlant();
            } else {
                showToast('当前阶段不支持该操作');
            }
        }
        function getCurrentPlant() {
            const plantId = window.currentPlantId;
            if (!plantId) return null;
            const plantedPlants = JSON.parse(localStorage.getItem('plantedPlants')) || [];
            return plantedPlants.find(p => p.id === plantId) || null;
        }
        function handleTopbarHarvestClick() {
            const status = document.getElementById('statusBadge')?.textContent || '';
            const plant = getCurrentPlant();
            if (!plant) return;
            if (plant.harvested) { showToast('已收获'); return; }
            if (status === '可收获') {
                harvestPlant();
            } else {
                if (confirm('该蔬菜尚未到可收获阶段，确定要提前收获吗？')) {
                    harvestPlant();
                }
            }
        }
        function getPlantLogs(plantId) {
            const allLogs = JSON.parse(localStorage.getItem('plantLogs') || '{}');
            return Array.isArray(allLogs[plantId]) ? allLogs[plantId] : [];
        }
        function savePlantLogs(plantId, logs) {
            const allLogs = JSON.parse(localStorage.getItem('plantLogs') || '{}');
            allLogs[plantId] = logs;
            localStorage.setItem('plantLogs', JSON.stringify(allLogs));
        }
        function findLatestUnloggedAction(plant) {
            const logs = getPlantLogs(plant.id);
            const loggedTimes = new Set(logs.map(l => l.actionTime));
            const actions = (plant.actions || []).slice().sort((a, b) => new Date(b.time) - new Date(a.time));
            for (const action of actions) {
                if (!loggedTimes.has(action.time)) return action;
            }
            return null;
        }
        function addPlantLog() {
            const plantId = window.currentPlantId;
            if (!plantId) return;
            const plantedPlants = JSON.parse(localStorage.getItem('plantedPlants')) || [];
            const plant = plantedPlants.find(p => p.id === plantId);
            if (!plant) return;
            const latestAction = findLatestUnloggedAction(plant);
            if (!latestAction) { showToast('暂无可记录的操作'); return; }
            const meta = getActionMeta(latestAction.type);
            const remark = prompt(`记录“${meta.label}”的备注（可选）：`) || '';
            const logs = getPlantLogs(plantId);
            const logEntry = {
                id: `${Date.now()}_${Math.random().toString(36).slice(2, 8)}`,
                plantId,
                plantName: plant.name,
                type: latestAction.type,
                actionLabel: meta.label,
                actionTime: latestAction.time,
                createdAt: new Date().toISOString(),
                remark
            };
            logs.push(logEntry);
            savePlantLogs(plantId, logs);
            showToast('已记录到日志');
            setTimeout(() => { window.location.href = 'logs.html'; }, 500);
        }
        function renderPage() {
            const plantId = getQueryParam('id');
            window.currentPlantId = plantId;
            // 模拟数据，如果没有真实数据则使用
            let plantedPlants = JSON.parse(localStorage.getItem('plantedPlants')) || [];
            // 如果没有数据，创建一些模拟数据以便展示
            if (plantedPlants.length === 0) {
                plantedPlants = [
                    {
                        id: plantId || '1',
                        name: '番茄',
                        icon: 'fa-leaf',
                        variety: '樱桃番茄',
                        plantedDate: new Date(Date.now() - 15 * 24 * 60 * 60 * 1000).toISOString(),
                        harvested: false,
                        actions: [
                            { type: 'water', time: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString() },
                            { type: 'fertilize', time: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString() },
                            { type: 'water', time: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString() }
                        ]
                    }
                ];
            }
            const plant = plantedPlants.find(p => p.id === plantId) || plantedPlants[0];
            if (!plant) return;
            const elHeaderIcon = document.getElementById('headerIcon');
            if (elHeaderIcon) elHeaderIcon.className = `fa ${plant.icon} text-3xl`;
            const elHeaderName = document.getElementById('headerName');
            if (elHeaderName) elHeaderName.textContent = plant.name;
            const elHeaderVariety = document.getElementById('headerVariety');
            if (elHeaderVariety) elHeaderVariety.textContent = plant.variety || '';
            const growthDays = getGrowthDays(plant);
            const growthStatus = getGrowthStatus(plant);
            const progress = getGrowthProgress(plant);
            const expectedHarvestDate = getExpectedHarvestDate(plant);
            const daysToHarvest = getDaysToHarvest(plant);
            const elStatus = document.getElementById('statusBadge');
            if (elStatus) elStatus.textContent = growthStatus;
            const elDays = document.getElementById('growthDays');
            if (elDays) elDays.textContent = `已种植 ${growthDays} 天`;
            const elPlanted = document.getElementById('modalPlantedDate');
            if (elPlanted) elPlanted.textContent = new Date(plant.plantedDate).toLocaleDateString('zh-CN');
            const elExpected = document.getElementById('modalExpectedHarvest');
            if (elExpected) elExpected.textContent = expectedHarvestDate;
            const elDaysLeft = document.getElementById('modalDaysToHarvest');
            if (elDaysLeft) elDaysLeft.textContent = daysToHarvest > 0 ? `${daysToHarvest}天` : '已到期';
            const elProgressText = document.getElementById('modalGrowthProgress');
            if (elProgressText) elProgressText.textContent = `${progress}%`;
            const elProgressPct = document.getElementById('modalProgressPercentage');
            if (elProgressPct) elProgressPct.textContent = `${progress}%`;
            const elProgressFill = document.getElementById('modalProgressFill');
            if (elProgressFill) {
                elProgressFill.style.width = `${progress}%`;
                // 添加进度条动画
                elProgressFill.classList.add('transition-all', 'duration-1000');
            }
            const harvestBtn = document.getElementById('harvestBtn');
            const harvestQuickBtn = document.getElementById('harvestQuickBtn');
            const harvestQuickText = document.getElementById('harvestQuickText');
            if (growthStatus === '可收获' && !plant.harvested) {
                harvestBtn.style.display = 'flex';
                if (harvestQuickBtn && harvestQuickText) {
                    harvestQuickText.textContent = '收获';
                    harvestQuickBtn.style.display = 'flex';
                    harvestQuickBtn.className = 'flex items-center justify-center gap-2 p-3 rounded-full bg-primary text-white font-medium transition-all duration-200 hover:bg-primary/90 active:scale-95';
                }
            } else if (growthStatus === '成熟期' && !plant.harvested) {
                harvestBtn.style.display = 'none';
                if (harvestQuickBtn && harvestQuickText) {
                    harvestQuickText.textContent = '铲除';
                    harvestQuickBtn.style.display = 'flex';
                    harvestQuickBtn.className = 'flex items-center justify-center gap-2 p-3 rounded-full bg-red-500 text-white font-medium transition-all duration-200 hover:bg-red-600 active:scale-95';
                }
            } else {
                harvestBtn.style.display = 'none';
                if (harvestQuickBtn) {
                    harvestQuickBtn.style.display = 'none';
                }
            }
            renderRecentActions(plant);
            const stageTitle = document.getElementById('stageTipsStage');
            if (stageTitle) stageTitle.textContent = growthStatus;
            renderStageTips(growthStatus);
        }
        function goBack() { window.location.href = 'growing-plants.html'; }
        window.addEventListener('DOMContentLoaded', renderPage);
    </script>
</head>
<body class="bg-light text-dark">
    <div class="min-h-screen flex flex-col bg-light">
        <!-- 顶部导航栏 -->
        <div class="sticky top-0 z-50 flex items-center gap-3 px-4 py-3 safe-top bg-white/90 backdrop-blur border-b border-border">
            <button class="w-9 h-9 rounded-full bg-light flex items-center justify-center text-dark hover:bg-gray-100 transition-colors" onclick="goBack()">
                <i class="fa fa-arrow-left"></i>
            </button>
            <h1 class="text-lg font-bold text-dark flex-1 text-center">蔬菜详情</h1>
            <button class="w-9 h-9 rounded-full bg-light flex items-center justify-center text-primary hover:bg-gray-100 transition-colors" id="topHarvestBtn" onclick="handleTopbarHarvestClick()">
                <i class="fa fa-trophy"></i>
            </button>
        </div>

        <!-- 主内容区 -->
        <div class="flex-1 overflow-y-auto p-4 pb-32">
            <!-- 植物信息卡片 -->
            <div class="hero-gradient rounded-xl border border-border p-4 mb-4 shadow-md relative overflow-hidden">
                <div class="flex items-center">
                    <div class="flex items-center gap-4">
                        <div class="w-16 h-16 rounded-lg bg-primary/10 border border-primary/20 flex items-center justify-center text-primary">
                            <i id="headerIcon" class="fa fa-leaf text-3xl"></i>
                        </div>
                        <div class="min-w-0">
                            <h2 id="headerName" class="text-xl font-bold text-dark line-clamp-1">番茄</h2>
                            <div id="growthDays" class="text-sm text-muted mt-1">已种植 0 天</div>
                        </div>
                    </div>
                    <div class="ml-auto flex items-center">
                        <span id="statusBadge" class="inline-flex items-center px-3 py-1 rounded-full bg-successLight text-success text-sm font-semibold">发芽期</span>
                    </div>
                </div>
                <!-- 生长进度 -->
                <div class="mt-4">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-sm font-medium text-dark">生长进度</span>
                        <span id="modalProgressPercentage" class="text-sm font-bold text-primary">0%</span>
                    </div>
                    <div class="h-2 bg-primary/10 rounded-full overflow-hidden">
                        <div id="modalProgressFill" class="h-full bg-gradient-to-r from-primary to-success rounded-full" style="width: 0%"></div>
                    </div>
                </div>
                <!-- 装饰元素 -->
                <div class="absolute right-0 bottom-0 w-40 h-40 bg-primary/5 rounded-full blur-2xl transform translate-x-1/3 translate-y-1/3"></div>
            </div>

            <!-- 详细信息卡片 -->
            <div class="bg-white rounded-xl border border-border p-4 mb-4 shadow-sm">
                <h3 class="text-sm font-bold text-dark mb-3">详细信息</h3>
                <div class="grid grid-cols-2 gap-4">
                    <div class="flex gap-3 items-center">
                        <div class="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
                            <i class="fa fa-calendar"></i>
                        </div>
                        <div>
                            <div class="text-xs text-muted">种植日期</div>
                            <div id="modalPlantedDate" class="text-sm font-medium text-dark">2024-01-01</div>
                        </div>
                    </div>
                    <div class="flex gap-3 items-center">
                        <div class="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
                            <i class="fa fa-bullseye"></i>
                        </div>
                        <div>
                            <div class="text-xs text-muted">预计收获</div>
                            <div id="modalExpectedHarvest" class="text-sm font-medium text-dark">2024-01-31</div>
                        </div>
                    </div>
                    <div class="flex gap-3 items-center">
                        <div class="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
                            <i class="fa fa-clock-o"></i>
                        </div>
                        <div>
                            <div class="text-xs text-muted">剩余天数</div>
                            <div id="modalDaysToHarvest" class="text-sm font-medium text-dark">30天</div>
                        </div>
                    </div>
                    <div class="flex gap-3 items-center">
                        <div class="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
                            <i class="fa fa-thermometer-half"></i>
                        </div>
                        <div>
                            <div class="text-xs text-muted">适宜温度</div>
                            <div id="modalIdealTemp" class="text-sm font-medium text-dark">18-26℃</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 阶段提醒卡片 -->
            <div class="bg-white rounded-xl border border-border p-4 mb-4 shadow-sm">
                <h3 class="text-sm font-bold text-dark mb-3">阶段提醒 · <span id="stageTipsStage">—</span></h3>
                <ul id="stageTips" class="space-y-2"></ul>
            </div>

            <!-- 快捷操作卡片 -->
            <div class="bg-white rounded-xl border border-border p-4 mb-4 shadow-sm">
                <h3 class="text-sm font-bold text-dark mb-3">快捷操作</h3>
                <div class="grid grid-cols-3 gap-3">
                    <button class="flex flex-col items-center justify-center p-3 rounded-lg bg-light border border-border transition-all duration-200 hover:shadow-md active:scale-95" onclick="performPlantAction('water')">
                        <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-1">
                            <i class="fa fa-tint"></i>
                        </div>
                        <span class="text-xs text-dark">浇水</span>
                    </button>
                    <button class="flex flex-col items-center justify-center p-3 rounded-lg bg-light border border-border transition-all duration-200 hover:shadow-md active:scale-95" onclick="performPlantAction('fertilize')">
                        <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-1">
                            <i class="fa fa-flask"></i>
                        </div>
                        <span class="text-xs text-dark">施肥</span>
                    </button>
                    <button class="flex flex-col items-center justify-center p-3 rounded-lg bg-light border border-border transition-all duration-200 hover:shadow-md active:scale-95" onclick="performPlantAction('prune')">
                        <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-1">
                            <i class="fa fa-scissors"></i>
                        </div>
                        <span class="text-xs text-dark">修剪</span>
                    </button>
                    <button class="flex flex-col items-center justify-center p-3 rounded-lg bg-light border border-border transition-all duration-200 hover:shadow-md active:scale-95" onclick="performPlantAction('loosen')">
                        <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-1">
                            <i class="fa fa-shovel"></i>
                        </div>
                        <span class="text-xs text-dark">松土</span>
                    </button>
                    <button class="flex flex-col items-center justify-center p-3 rounded-lg bg-light border border-border transition-all duration-200 hover:shadow-md active:scale-95" onclick="performPlantAction('pest')">
                        <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-1">
                            <i class="fa fa-bug"></i>
                        </div>
                        <span class="text-xs text-dark">病虫防治</span>
                    </button>
                    <button id="harvestQuickBtn" class="flex flex-col items-center justify-center p-3 rounded-lg bg-primary text-white font-medium transition-all duration-200 hover:bg-primary/90 active:scale-95" style="display:none;" onclick="handleHarvestOrRemove()">
                        <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mb-1">
                            <i class="fa fa-trophy"></i>
                        </div>
                        <span id="harvestQuickText" class="text-xs">收获</span>
                    </button>
                </div>
            </div>

            <!-- 最近操作卡片 -->
            <div class="bg-white rounded-xl border border-border p-4 mb-4 shadow-sm">
                <h3 class="text-sm font-bold text-dark mb-3">最近操作</h3>
                <div id="recentActionsList" class="rounded-lg overflow-hidden border border-border"></div>
            </div>
        </div>

        <!-- 底部操作栏 -->
        <div class="fixed bottom-0 left-0 right-0 bg-white/95 backdrop-blur border-t border-border p-4 safe-bottom flex gap-3 z-40">
            <button class="flex-1 flex items-center justify-center gap-2 bg-light text-dark font-medium py-3 rounded-full border border-border transition-all duration-200 hover:bg-gray-100 active:scale-95" onclick="addPlantLog()">
                <i class="fa fa-pencil"></i>
                <span>记录日志</span>
            </button>
            <button id="harvestBtn" class="flex-1 flex items-center justify-center gap-2 bg-primary text-white font-medium py-3 rounded-full transition-all duration-200 hover:bg-primary/90 active:scale-95" onclick="harvestPlant()" style="display:none;">
                <i class="fa fa-trophy"></i>
                <span>收获</span>
            </button>
        </div>

        <!-- 底部导航 -->
        <nav class="tab-bar fixed bottom-0 left-0 right-0 flex items-center justify-around py-2 border-t border-gray-200 bg-white">
            <a href="home.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
                <i class="fa fa-home text-lg"></i>
                <span class="text-xs mt-1">首页</span>
            </a>
            <a href="growing-plants.html" class="tab-item flex flex-col items-center py-2 px-3 text-primary font-medium">
                <i class="fa fa-leaf text-lg"></i>
                <span class="text-xs mt-1">菜园</span>
            </a>
            <a href="task.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
                <i class="fa fa-tasks text-lg"></i>
                <span class="text-xs mt-1">任务</span>
            </a>
            <a href="reminders.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
                <i class="fa fa-bell text-lg"></i>
                <span class="text-xs mt-1">提醒</span>
            </a>
            <a href="profile.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
                <i class="fa fa-user text-lg"></i>
                <span class="text-xs mt-1">我的</span>
            </a>
        </nav>
    </div>
</body>
</html>


